<template>
    <!-- {{ key }}:是vue中的插值表达式,用来展示数据仓库中指定key的数据 -->
    <div class="c2">{{ msg }}</div>
    <!-- 
        v-model:是vue指令,用于处理双向数据绑定
        其属性值指向的是数据仓库中需要绑定的数据的key
    -->
    <input type="text" v-model="msg">
    <button v-on:click="increment">您点击了{{ count }}次</button>
</template>
<script>
export default{
    // 数据仓库
    data(){
        return {
            msg: "Hello Vue",
            count: 0
        }
    },
    methods:{
        increment(){
            this.count++
        }
    }
}
</script>
<style>
.c2{
    font-size: 2rem;
    color: green;
}
</style>